<template>
	<view>
		<view class="addPhoto m-2  bg-white py-2 rounded-20">
			<view class="d-flex flex-column a-center pt-2">
				<view class="icon_gray bg-light-secondary d-flex flex-column j-center a-center rounded-20" @tap="unloadImg">
					<image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper>
					<view class="crop rounded-20 position-relative" v-if="cropFilePath||class_detail.category_image">
						<view class="delete" @tap.stop="delete_crop">
							<image src="../../static/images/goods/icon_delete.png" mode="" class="icon_delete"></image>
						</view>
						<image :src="class_detail.category_image?class_detail.category_image:cropFilePath" mode="" class="rounded-20 img"></image>
					</view>
					<view class="" v-else>
						<image class="icon_gray_camera " src="../../static/images/goods/icon_gray_camera.png" mode=""></image>
						<view class="font">添加图片</view>
					</view>
				</view>
				<view class="font py-2">添加需要图片上传</view>
			</view>
			<view class="">
				<view class="ml-3 border-top py-2">
					<textarea v-model="goods_name"  placeholder="请输入分类名称" placeholder-class="font-md"  @input="change" name="" id="" maxlength="37"></textarea>
					<view class="font d-flex j-end mr-2 mt-5">{{num}}/{{count}}</view>
				</view>
			</view>
		</view>
		
		<view class="pl-2 bg-white rounded-20 m-2 clazz" @click="tabClass(class_detail)">
			<view class="d-flex j-sb pr-2 py-3 clazz a-center">
				<view class="">上级分类</view>
				<view class="j-end d-flex a-center w-50">
					<text class="text-light-muted ellipsis-1" v-if="!msgboard">{{clazz_name?clazz_name:'顶级分类'}}</text>
					<text class="ellipsis-1 " v-else>{{msgboard.cat_name?msgboard.cat_name:'顶级分类'}}</text>	
					<image src="../../static/images/user/icon_right_arrow.png" mode="" class="icon_right_arrow"></image>
				</view>
			</view>
		</view>
		
		<view class="pl-2 bg-white rounded-20 m-2 clazz " >
			<view class="d-flex j-sb a-center pr-2 py-3 clazz">
				<view class="">关键字</view>
				<view class="d-flex j-center a-center ">
					<input type="text" placeholder="请输入关键字" @input="keywordsInput"  v-model.trim="keywords" class="text-right class_input" />
				</view>
			</view>
		</view>
		
		<view class="rounded-10 m-2 pl-3 bg-white clazz " >
			<view class="d-flex j-sb pr-2 py-3 clazz a-center">
				<view class="">是否显示</view>
				<view class="d-flex j-center a-center">
					<view class="" v-if="addClazz">
						<u-switch v-model="is_show" size="43" @change="toggle"></u-switch>
					</view>
					<view class="" v-else>
						<u-switch v-model="class_detail.is_show" size="43" @change="toggle"></u-switch>
					</view>
				</view>
			</view>			
		</view>
		
		<s-popup custom-class="demo-popup" position="bottom" v-model="pictureShow">
			<!-- 内容 -->
			<view class="m-2 bg-white rounded-20 icon_share">
				<view class="border-bottom d-flex ml-4 py-3 j-center a-center" @click="photos">
					<view class="">拍照</view>
				</view>
				<view class="d-flex ml-4 py-3 j-center a-center" @click="album">
						<view class="">我的相册</view>
				</view>
			</view>
			<view class="d-flex j-center a-center span-19 py-3 bg-white mx-2 my-1 rounded-25" @click="cancelShare">
				取消
			</view>
		</s-popup>
		
		<view class="bg-white py-2 w-100 position-fixed bottom-0 btn">
			<button type="warn" @click="class_confirm">确定</button>
		</view>
	</view>
</template>

<script>
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	import sPopup from '../../components/s-popup/index.vue';
	export default {
		components: {
			ImageCropper,
			sPopup
		},
		data() {
			return {
				msgboard:null, // 全局变量
				class_detail:"", // 分类详情
				num:0,
				count:36,
				tempFilePath: '', // 图片
				cropFilePath: '', // 裁剪
				pictureShow:false, // 弹框
				goods_name:"", // 商品名称
				keywords:"", // 关键字
				addClazz:"", // 添加分类
				is_show:'', // 开关
				dictionaries:"", // 图片字典
				clazz_name:"", // 上级分类name
			}
		},
		methods: {
			tabClass(){
				uni.navigateTo({
					url:"/pages/goods-class-addshop-board/goods-class-addshop-board"
				})
			},
			// 添加分类
			class_confirm(e){
				if(this.addClazz){
					this.$H.post("admin/merchant/goods/merchant/category/add",{
						category_name:this.goods_name,
						parent_id:this.msgboard.cat_id,
						is_show:this.is_show,
						category_image:this.dictionaries,
						keywords:this.keywords
					}).then(res=>{
						uni.navigateBack({
							delta:1
						})
					})
					console.log("111")
				}else{
					this.$H.post("admin/merchant/goods/merchant/category/update",{
						category_id:this.class_detail.category_id,
						category_name:this.goods_name,
						parent_id:this.msgboard.cat_id,
						is_show:this.class_detail.is_show,
						category_image:this.dictionaries,
						keywords:this.keywords
					}).then(res=>{
						uni.navigateBack({
							delta:1
						})
					})
					console.log("222")
				}
			},
			// 显示切换
			toggle(e){
				if(this.addClazz){
					if(e){
						this.is_show=1
					}else{
						this.is_show=0
					}
				}else{
					this.$H.post("admin/merchant/goods/merchant/category/show",{
						category_id:this.class_detail.category_id,
						is_show:this.class_detail.is_show,
						}).then(res=>{
						console.log(res)
					})	
				}
				
			},
			// 文本框
			change(e){
				if(e.detail.cursor<36){
					this.num=e.detail.cursor
					this.goods_name=e.detail.value
				}else{
					console.log("输入已超出限制")
				}
				
			},
			keywordsInput(e){
				this.keywords=e.detail.value
			},
			// 上传图片
			unloadImg(){
				this.pictureShow = true;
			},
			// 拍照
			photos(){
				let that=this;
				uni.chooseImage({
				    count:1,
				    sizeType:["original","compressed"],
					sourceType: ['camera'], //从相册选择
				    success:(res)=>{
						console.log(res,"拍照")
						this.tempFilePath=res.tempFilePaths
					}
				});
				that.pictureShow=false;
			},
			// 我的相册
			album(){
				let that=this;
				uni.chooseImage({
				    count:1,
				    sizeType:["original","compressed"],
					sourceType: ['album'], //从相册选择
				    success:(res)=>{
						console.log(res,"我的相册")
						uni.showToast({
							title: "上传中...",
							icon: "loading",
							mask: true,
							duration: 5000,
			            });
						this.tempFilePath=res.tempFilePaths
						if(this.class_detail.category_image){
							this.class_detail.category_image=''
						}
					}
				});
				that.pictureShow=false;
			},
			delete_crop(){
				this.cropFilePath=""
			},
			uploadFile(filePath){
				uni.uploadFile({
					url:`${this.localConfig.web_Url}v2/store/medialibrary/image/temp/upload`,
					filePath:filePath,
					name:"tempimage",
					formData:{
						'token':uni.getStorageSync("token")
					},
					success: (res) => {
						let fileData=JSON.parse(res.data)
						console.log(fileData.data)
						this.dictionaries=fileData.data
					}
				})
			},
			// 裁剪图片
			confirm(e) {
			    this.tempFilePath = ''
			    this.cropFilePath = e.detail.tempFilePath
				this.uploadFile(this.cropFilePath)
				this.pictureShow=false;
			},
			toJSON(){
				return this
			},
			
		},
		onShow(){
			var globalData = getApp().globalData.closeLists;
			this.msgboard=globalData
		},
		onLoad(e) {
			
			this.addClazz=e.addClazz
			if(e.category_id){
				uni.showLoading({
					title: '加载中',
					success: () => {
						this.$H.post("admin/merchant/goods/merchant/category/detail",{
							category_id:e.category_id,
							}).then(res=>{
							this.class_detail=res.data
							this.keywords=this.class_detail.keywords
							this.goods_name=this.class_detail.category_name
							if(this.class_detail.category_name.length>=36){
								this.num=36
							}else{
								this.num=this.class_detail.category_name.length
							}
							uni.hideLoading();
							if(e.two==2){
								this.clazz_name=res.data.category[0].cat_name
								console.log(11)
							}else if(e.two==3){
								this.clazz_name=res.data.category[1].cat_name
								console.log(22)
							}
						})
					}
				});
				
			}
		}
	}
</script>

<style>
	.class_camera{
		width: 80upx;
		height: 80upx;
	}
	.btn /deep/ button{
		width: 85%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.class_input{ 
		caret-color: #00f;
	}
	
	.icon_gray{
		width: 220upx;
		height: 220upx;
	}
	.icon_gray_camera{
		width: 100upx;
		height: 100upx;
	}
	.release /deep/ button{
		width: 85%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	
	.img{
		width: 100%;
		height: 100%;
	}
	.crop{
		width: 220upx;
		height: 220upx;
		border-radius: 20upx;
	}
	
	.s-popup-mask{
		background: rgba(204,204,204,0.3)!important;
	}
	.content{
		background-color:rgb(237,237,237)!important;
		color: #666666;
	}
	.s-popup-wrap{
		background: rgba(204,204,204,0)!important;
	}
	.icon_share view{
		color: #888;
	}
	.icon_share image{
		width: 120upx;
		height: 120upx;
	}
	.icon_delete{
		width: 40upx;
		height: 40upx;
		z-index: 111;
	}
	.delete{
		z-index: 111;
		position: absolute;
		top: -10upx;
		right: -10upx;
	}
</style>
